<template>
  <div class="container">
    <top centerTitle="资产全景大屏"></top>
    <div class="bottom">
      <!-- 父容器的四个转角图片背景 -->
      <img class="leftUp" src="@/assets/aiScreen/leftUp.png" alt="left-up" />
      <img class="leftDown" src="@/assets/aiScreen/leftDown.png" alt="left-down" />
      <img class="rightUp" src="@/assets/aiScreen/rightUp.png" alt="right-up" />
      <img class="rightDown" src="@/assets/aiScreen/rightDown.png" alt="right-down" />
      <!-- 父容器的左右边框上的背景图片 -->
      <img class="leftBorder" src="@/assets/aiScreen/leftBorder.png" alt="left-border" />
      <img class="rightBorder" src="@/assets/aiScreen/rightBorder.png" alt="right-border" />
      <assetPanorama2 ref="assetPanorama2"></assetPanorama2>
    </div>
  </div>
</template>

<script>
import top from './components/top.vue'
import assetPanorama2 from './assetPanorama2.vue'
import { setToken } from '@/utils/auth'
import { login2 } from "@/api/firstPage.js"

export default {
  name: "aiScreen",
  components: {
    top,
    assetPanorama2
  },
  props: {
  },
  data() {
    return {
      timer: null // 添加 timer 属性
    }
  },
  created() {},
  mounted() { 
    if (this.$route.query.key !== undefined && this.$route.query.key !== null && this.$route.query.key !== '') {
      this.getToken()
    } else {
      this.$refs.assetPanorama2.initialize()
    }
  },
  beforeDestroy() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  watch: {},
  computed: {},
  methods: {
    async getToken() {
      const data = {
        Data: {
          Password: this.$route.query.key,
          FileName: 'param_asset_panoramic.json'
        }
      };
      const res = await login2('LoginDP', data);
      await setToken(res.Token);
      // 立即执行第一次请求
      this.executeRequests();
      // 设置定时器，每隔60秒执行一次请求
      this.timer = setInterval(() => {
        this.executeRequests();
      }, 60000);
    },
    // 提取请求方法到一个独立函数
    executeRequests() {
      this.$refs.assetPanorama2.initialize();
    },
  },
}
</script>
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  background-color: #031d31;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.bottom {
  position: relative;
  /* background-color: aqua; */
  flex: 1;
}

.leftUp {
  position: absolute;
  z-index: 999;
  left: 0;
  top: -20px;
}

.leftDown {
  position: absolute;
  z-index: 999;
  bottom: 0;
  left: 0;
}

.rightUp {
  position: absolute;
  z-index: 999;
  top: -20px;
  right: 0;
}

.rightDown {
  position: absolute;
  z-index: 999;
  bottom: 0;
  right: 0;
}

.leftBorder {
  position: absolute;
  z-index: 999;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.rightBorder {
  position: absolute;
  z-index: 999;
  right: 0;
  top: 40%;
  transform: translateY(-50%);
}

.leftBg {
  background-image: url('../../assets/aiScreen/bg1.png');
  /* 使用绝对路径引用背景图片 */
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.rightBg {
  background-image: url('../../assets/aiScreen/bg1.png');
  /* 使用绝对路径引用背景图片 */
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.leftBox {
  display: flex;
  flex-direction: column;
  padding-right: 4px;
  height: 100%;
}

.centerBox {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.rightBox {
  display: flex;
  flex-direction: column;
  padding-right: 4px;
  height: 100%;
}

/* 自定义滚动条 */
::v-deep ::-webkit-scrollbar {
  width: 2px;
  /* 滚动条宽度 */
}

::v-deep ::-webkit-scrollbar-track {
  background: #1a2b3c;
  /* 轨道背景色，深色调与 #031d31 协调 */
  border-radius: 2px;
}

::v-deep ::-webkit-scrollbar-thumb {
  background: #4a90e2;
  /* 滑块颜色，浅蓝色高对比 */
  border-radius: 2px;
}

::v-deep ::-webkit-scrollbar-thumb:hover {
  background: #357abd;
  /* 悬停时颜色稍暗 */
}
</style>